{% extends "base.html" %}
{% load i18n %}
<head>
    {% block title %}
        <title>{% trans 'Case search' %}</title>
    {% endblock %}
    {% block js %}
        <script src="/assets/js/jquery.masonry.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var category = '{{ category }}';
                var type = "{{ type }}";
                querycase(category, type);
                $(document).bind('scroll', onScroll);
                var $container = $('#tiles');
                $container.imagesLoaded(function () {
                    $container.masonry({
                        itemSelector: '.caseblock',
                        gutterWidth: 14
                    });
                });
            });
            function querycase(category, type) {

                $.ajax({
                    type: "get",
                    url: "/list/",
                    data: { no: 0, category: category, type: type},
                    dataType: "html",
                    success: function (data) {
                        if (data) {
                            flag = true;
                        }
                        //var boxdata = $(data);
                        $('#tiles').empty();
                        $('#tiles').append(data).masonry('reload');
                    }
                });
                //alert(url);
            }
            var flag = true;
            var adFlag = true;
            function onScroll(event) {
                // Check if we're within 100 pixels of the bottom edge of the broser window.
                var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
                if (closeToBottom && flag) {
                    flag = false;
                    // Get the first then items from the grid, clone them, and add them to the bottom of the grid.
                    var items = $('#tiles dl');
                    if (items.length < 500) {
                        $.ajax({
                            type: "get",
                            url: "/list/",
                            data: { no: items.length, category: '{{ category }}', type: '{{ type }}'},
                            dataType: "html",
                            success: function (data) {
                                if (data) {
                                    flag = true;

                                }
                                //var boxdata = $(data);
                                $('#tiles').append(data).masonry('reload');
                            }
                        });
                    }
                }
            }
        </script>
    {% endblock %}
</head>
<body>
{% block menu %}
    <li><a href="/">{% trans 'Home' %}</a></li>
    <li class="cur"><a href="/case/search/">{% trans 'Case Query' %}</a></li>
    <li><a href="/case/add/">{% trans 'Add Case' %}</a></li>
    <li><a href="/case/category/">{% trans 'Category' %}</a></li>
    <li><a href="/contact/">{% trans 'Contact Us' %}</a></li>
{% endblock %}
{% block detail %}
    <div class="main">
        <div class="caseWrap" id="tiles">

        </div>
    </div>

{% endblock %}
</body>